<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>店铺信息设置</span>
      <div class="right">
      </div>
    </div>
		<div v-show="isshow">
			<div class="title">
				<span>您的店铺资料已经提交到平安银行，正在审核中，请耐心等待。该过程一般需要5个工作日！</span>
			</div>
		</div>
		<div>
			<div class="title">
				<span>您的店铺资料已经审核通过 ，请填写以下信息！</span>
			</div>
			<div class="logo">
				<div class="boxts">
					<span>店铺logo[240*240]</span>
					<div class="phone">
						<el-upload
  					class="avatar-uploader"
  					action="/api/upload"
					:data="{token:token,user_id:myid}"
  					:show-file-list="false"
  					:on-success="handleAvatarSuccess"
  					:before-upload="beforeAvatarUpload">
  					<img v-if="imageUrl" :src="imageUrl" class="avatar">
  					<i v-else class="el-icon-upload avatar-uploader-icon"></i>
					<div v-if="!imageUrl" class="el-upload__text">上传店铺LOGO</div>
				</el-upload>
					</div>
				</div>
			</div>
			<div class="biao">
				<div class="list">
					<div class="titles">
						<span>店铺基本信息</span>
					</div>
					<div class="bar">
						<div class="name">
							<span>店铺名称</span>
						</div>
						<input type="text" placeholder="请输入店铺名称" v-model="shop_name">
					</div>
					<div class="bar">
						<div class="name">
							<span>店铺关键词</span>
						</div>
						<input type="text" placeholder="请输入店铺关键词" v-model="keyword">
					</div>
					<div class="bar">
						<div class="name">
							<span>店铺描述</span><span class="k">(不少于120字)</span>
						</div>
						<textarea name="" id="" cols="30" rows="10"  v-model="describe"></textarea>
					</div>
					<div class="bar">
						<div class="name">
							<span>店铺客服电话</span>
						</div>
						<input type="text" placeholder="请输入店铺客服电话"  v-model="phone">
					</div>
					<div class="bar">
						<div class="name">
							<span>店铺在线客服QQ</span>
						</div>
						<input type="text" placeholder="请输入店铺在线客服QQ"  v-model="qq">
					</div>
					<div class="bar">
						<div class="name">
							<span>店铺在线客服链接</span>
						</div>
						<input type="text" placeholder="请输入店铺在线客服链接"  v-model="url">
					</div>
					<div class="bar">
						<div class="name">
							<span>店铺地址</span>
						</div>
						<input type="text" placeholder="请输入店铺地址"  v-model="address">
					</div>
				</div>
			</div>
		
		
			<div class="btn">
				<button class="next" @click="forthreeClick()">确认提交信息</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: "audit",
  data() {
    return {
      imageUrl: "",
      fascia: "",
      shop_name: "",
      keyword: "",
      describe: "",
      phone: "",
      qq: "",
      url: "",
      address: ""
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    //图片上传成功的回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.fascia = res.data;
    },

    //上传的限制条件
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isGif = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isPNG && !isGif) {
        this.$dialog.toast({ mes: "只能是JPG,Png,gif格式!" });
      }
      if (!isLt2M) {
        this.$dialog.toast({ mes: "上传图片不能大于20M" });
      }
      return (isJPG && isLt2M) || isPNG || isGif;
    },
    forthreeClick: function() {
      if (!this.fascia) {
        this.$dialog.toast({ mes: "请上传店铺LOGO" });
        return;
      }
      if (!this.shop_name) {
        this.$dialog.toast({ mes: "请输入店铺名称" });
        return;
      }
      if (!this.keyword) {
        this.$dialog.toast({ mes: "请输入店铺关键词" });
        return;
      }
      if (!this.describe) {
        this.$dialog.toast({ mes: "请输入店铺描述" });
        return;
      }
      if (!this.phone) {
        this.$dialog.toast({ mes: "请输入店铺客服电话" });
        return;
      }
      if (!this.qq) {
        this.$dialog.toast({ mes: "请输入店铺客服QQ" });
        return;
      }
      if (!this.url) {
        this.$dialog.toast({ mes: "请输入店铺客服在线地址" });
        return;
      }
      if (!this.address) {
        this.$dialog.toast({ mes: "请输入店铺地址" });
        return;
      }
      let self = this;
      let url = "/api/shopSite/index";
      self.httpPost(
        url,
		{ 	user_id: this.myid, 
			token: this.token, 
			fascia: this.fascia,
			shop_name: this.shop_name,
			keyword:this.keyword,
			describe: this.describe,
			phone: this.phone,
			qq: this.qq,
			url: this.url,
			address: this.address,
		},
        function(res) {
          if (res.code == 200) {
            self.$dialog.toast({ mes: res.msg });
            setTimeout(function() {
              self.$router.push("./mine");
            }, 1000);
          } else {
			  self.$dialog.toast({ mes: res.msg });
		  }
        }
      );
	},
	 Table_forClick:function(){
      let self = this;
      let url = "/api/shopSite/status";
      self.httpPost(
        url,
        {
          user_id: this.myid,
          token: this.token,
        },
        function(res) {
          if (res.data == 1) {
            self.$dialog.toast({
            mes: "您的店铺信息正在审核中，请勿重复操作！",
            timeout: 2000
		  });
		  self.$router.push("./mine");
          }
          if (res.data == 2) {
            self.$dialog.toast({
            mes: "您的店铺审核已通过,请勿重复操作",
            timeout: 2000
          });
          self.$router.push("./mine");
          }
          if (res.data == 3) {
			self.$dialog.toast({
            mes: "您的店铺审核未通过,请重新提交申请",
            timeout: 2000
          });
          }
        }
      );
    },
  },
  created() {
    document.title = "店铺信息审核";
    this.token = localStorage.getItem("mytoken");
	this.myid = localStorage.getItem("myid");
	this.Table_forClick();
  }
};
</script>


<style scoped>
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
}
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.title {
  width: 100%;
  /* height:1.5rem; */
  padding: 0.3rem 0.3rem;
  display: flex;
  align-items: center;
  background: #ffe8e8;
}
.title span {
  font-size: 0.3rem;
  color: #e63f3f;
}
.logo {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.logo .boxts {
  width: 90%;
  height: 3.72rem;
  background: #fff;
  border-radius: 20px;
  padding: 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.logo .boxts span {
  color: #333;
  font-size: 0.32rem;
}
.logo .boxts .phone {
  width: 3.32rem;
  height: 2.48rem;
  background: #f2f2f2;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo .boxts .phone span {
  font-size: 0.24rem;
  color: #333;
  margin-top: 0.28rem;
}
.biao {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.list {
  width: 90%;
  background: #fff;
  border-radius: 20px;
  padding: 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list .titles span {
  font-size: 0.32rem;
  color: #333;
}
.list .bar {
  width: 100%;
  /* height:1.6rem; */
  display: flex;
  flex-direction: column;
}
.list .bar .name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  align-items: center;
}
.list .bar .name span {
  font-size: 0.28rem;
  margin-left: 0.1rem;
}
.list .bar .name img {
  width: 0.1rem;
  height: 0.1rem;
}
.list .bar input {
  border: 1px solid #949494;
  height: 0.8rem;
  border-radius: 5px;
}
.list .bar textarea {
  border: 1px solid #949494;
  height: 1.96rem;
  border-radius: 5px;
}
.list .bar .adr {
  height: 0.8rem;
  border-radius: 5px;
}
.list .bar .lc {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.list .bar .adr input {
  border: none;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.btn .next {
  width: 90%;
  height: 0.9rem;
  background: #e63f3f;
  border: none;
  border-radius: 10px;
  font-size: 0.32rem;
  color: #fff;
}
.txt::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.05rem;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.28rem;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
</style>
<style>
.adr .yd-cell {
  border: 1px solid #949494;
  height: 0.8rem !important;
  border-radius: 5px;
}
.adr .yd-cell-right {
  height: 0.8rem;
  min-height: 0;
}
.yd-cell:after {
  height: 0;
}
.lc {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.lc .inf {
  height: 0.8rem !important;
  width: 48.2%;
  border: 1px solid #949494;
  border-radius: 5px;
}
.yd-cell-right {
  min-height: 0;
}
.lc .inf .yd-cell {
  height: 0.6rem !important;
  margin-top: 0.03rem;
  overflow: hidden;
}
.lc .inf .yd-cell-right {
  height: 0.7rem !important;
}
.lc .inf .yd-cell-right select {
  height: 0.5rem !important;
}
.lc .inf .yd-cell-item {
  width: 90%;
  margin: 0 auto;
  height: 0.7rem;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 110px;
  line-height: 143px;
  text-align: center;
}
.avatar {
  width: 180px;
  height: 136px;
  display: block;
}
</style>



